<template ref="transEvent">
    <el-row :gutter="10" class="hdpi">
        <div v-if="isbigscreen" class="bigscreen"> 
             <iframe v-show="isbigscreen" class="bigscreenCanvas" :src="bigscreenPath"></iframe>
             <div class="close-bigscreen" @click="hidebigscreen()"><i class="el-icon-close" style="font-size: 30px;"></i> </div>
        </div>
        <el-col :lg="5" :md="5" class="hidden-md-and-down">
            <el-collapse :value="activeName" style="border:0;">
                <el-collapse-item  v-for="(item,index) in groupslist" :title="item.name" :name="item.id" class="grid-back collapse-custom" >
                    <el-checkbox-group v-if="item.childrens==null || item.childrens.length==0" v-model="devicelist" @change="selectdevice">
                        <el-checkbox class="devicelabel" v-for="devices in item.list" :label="devices.deviceId" ><span class="pb-colorbg" :class="[devices.state==0? 'bg-gray':'bg-green']"></span> {{devices.name}}</el-checkbox>
                    </el-checkbox-group>
                    <el-collapse v-if="item.childrens &&item.childrens.length>0" :value="activeName2" style="border:0;">
                        <el-collapse-item  v-for="childrens in item.childrens" :title="childrens.name" :name="childrens.id" class="grid-back collapse-custom" >
                            <el-checkbox-group  v-model="devicelist" @change="selectdevice">
                                <el-checkbox class="devicelabel" v-for="devices in childrens.list" :label="devices.deviceId" ><span class="pb-colorbg" :class="[devices.state==0? 'bg-gray':'bg-green']"></span>{{devices.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
        </el-col>
        <el-col :lg="17" :md="17" style="margin: 20px;">
            <div class="cameraiframe" v-for="item in videolist">
                <iframe :src="item.path"  height="100%" width="100%" frameborder="0"></iframe>
                <div class="fullscreen" @click="showbigscreen(item)"></div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import {
    video_query,
    device_group_query,
    device_company_group_query
} from '../../api/api'
export default {
data(){
    return{
        devicelist:[],//设备列表
        groupslist:[],//分组列表
        listLoading: false,
        isbigscreen: false,//是否显示大屏
        videolist: [], 
        activeName:[],
        activeName2:[],
        token: '',
        bigscreenPath: '',//大屏的src
    }
},
methods:{
    select(e){
        console.log(e)
    },
        getGroup(){//获取分组列表
        this.listLoading = true;
        let para = {
            pageNo: 1,
            pageSize: 1000,  
        };
        device_group_query(para).then(res => { 
        this.begCode(res.code);
        // this.getrecursion(res.data);
        this.groupslist = res.data
        this.listLoading = false;     
        // console.log(res)
        for(let i in this.groupslist){//根据分组id查询各分组下的设备    
            // this.activeName.push(this.groupslist[i].id)//默认展开所有列表
            if(this.groupslist[i].childrens!=null && this.groupslist[i].childrens.length > 0){
                this.groupslist[i].childrens.forEach(datas => {
                    // console.log(datas)
                    let para1 = {
                        deviceGroupId: datas.id,
                        mini: 5,
                        pageNo: 1,
                        pageSize: 1000,
                    }
                     device_company_group_query(para1).then(res => {
                        var newObj1 = []
                         for(let j in res.data.list){
                            //  console.log(res.data.list[j])
                            if(res.data.list[j].deviceTypeId == "214"){//根据设备id(deviceTypeId)过滤掉不含有摄像头的设备
                                newObj1.push(res.data.list[j])
                                // console.log(newObj)
                                this.$set(datas,'list',newObj1)
                            }
                        }
                     })
                });
            }
            let para = {
                deviceGroupId: this.groupslist[i].id,
                mini: 5,
                pageNo: 1,
                pageSize: 1000,
                // deviceTypeId: 214,//过滤掉不含有摄像头的设备
            }
            device_company_group_query(para).then(res => {
                    // console.log(res)
                    var newObj = []
                    for(let j in res.data.list){
                        if(res.data.list[j].deviceTypeId == "214"){//根据设备id(deviceTypeId)过滤掉不含有摄像头的设备
                            newObj.push(res.data.list[j])
                            // console.log(newObj)
                            this.$set(this.groupslist[i],'list',newObj)
                        }
                    }
                    // Object.assign(this.groupslist[i],newObj)
            });
        }

        console.log(this.groupslist)
        
        });
    },
    getrecursion(data) {
        for (var i in data) {
        this.groupslist.push(data[i]);
        OUT:
        if (!data[i].childrens) {
            break OUT;
        } else {
            this.getrecursion(data[i].childrens);
        }
        } 
    },

    selCamera(e){
        console.log(e)
    },
    selectdevice(){
        console.log(this.devicelist)
        console.log(this.videolist.length+1)
        if(this.videolist.length+1 > this.devicelist.length){
            this.videolist = []
        }
        for(let i in this.devicelist){//根据设备id查询设备内的所有摄像头
                let para = {
                pageNo: 1,
                pageSize: 1000,
                deviceId: this.devicelist[i]
            };
            video_query(para).then(res => {
                // for(let j in res.data.list){//拼接摄像头的src地址
                //     Object.assign(res.data.list[j],{path:'https://iot.dygytz.com/ys_camera/player/ui-voice.html?videoSn='+res.data.list[j].videoSn+'&key='+ this.token+'&show=1'})
                //     this.videolist.push(res.data.list[j])
                //     if(this.videolist.length>9){
                //         this.$message({
                //             message: '最多显示九个摄像头界面！',
                //             type:'warning'
                //         })
                //         this.devicelist.pop()
                //         this.selectdevice()
                //         return false
                //     }
                // }
               if(res.code == 0){
                    Object.assign(res.data.list[0],{path:'https://iot.dygytz.com/ys_camera/player/ui-voice.html?videoSn='+res.data.list[0].videoSn+'&key='+ this.token+'&show=1&clear=live'})
                    this.videolist.push(res.data.list[0])
                    let obj = {};
                    this.videolist = this.videolist.reduce((cur,next) => {
                        obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
                        return cur;
                    },[])
                    console.log(this.videolist)
                    if(this.videolist.length>9){
                        this.$message({
                            message: '最多显示九个摄像头界面！',
                            type:'warning'
                        })
                        this.devicelist.pop()
                        this.selectdevice()
                        return false
                    }
               }   
            });
        }
        // console.log(this.videolist)
    },
    showbigscreen(e){
        console.log(e)
        this.isbigscreen = true
        // this.bigscreenPath = e.path
        this.bigscreenPath = 'https://iot.dygytz.com/ys_camera/player/ui-voice.html?videoSn='+e.videoSn+'&key='+ this.token
    },
    hidebigscreen(){
        this.isbigscreen = false
    },

},
mounted(){
    this.getGroup()
    this.token = localStorage.getItem('key')
}
}
</script>

<style>
.grid-back {
    position: relative;
    background-size: 100%;
    padding: 2% 10px ;
    /* min-height: 300px; */
    background-position: top, bottom;
    background-image: url(../../assets/02.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color:#fff;
    cursor: pointer;
}
.bigscreen{
    width: 95vw;
    height: 90vh;
    position: fixed;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
}
.bigscreenCanvas{
    width: 95vw;
    height: 90vh;
    z-index: 2;
}
.hidden-md-and-down{
    margin: 20px;
    max-height: 85vh;
    overflow: auto;
    color: #fff;
}
.hidden-md-and-down::-webkit-scrollbar{
    display:none
}
.cameraiframe{
    margin: 10px 20px;
    width: 30%;
    height: 300px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
/* .fullscreen{
    width: 100%;
    color:#fff;
    position: absolute;
    bottom: -20px;
    background: #3d3d3d;
    text-align: right;
} */
.fullscreen{
    width: 100%;
    height: 100%;
    color:#fff;
    position: absolute;
    top: 0;
}
.choosedevice{
    margin: 10px 10px;
    margin-bottom: 20px;
    padding: 15px 0 15px 20px;
}
.close-bigscreen{
    width: 3%;
    height: 3%;
    color:#fff;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    cursor: pointer;
}
.grid-detailed{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .collapse-custom .el-collapse-item__header{
      background: #0c3465;
      border-bottom: 1px;
      font-size: 20px;
      /* text-align: center; */
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__content{
      padding: 0;
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__wrap{
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .group-device{
      color: #fff;
      /* text-align: center; */
      font-size: 18px;
      cursor: pointer;
      margin: 10px 0;
      padding: 10px 20px;
  }
  .group-device:hover{
      background: #2b5486;
  }
  .devicelabel{
      width: 100%;
      margin: 10px 0;
  }
  .devicelabel>.el-checkbox__input{
      float: right;
      padding-right: 10px;
      padding-top: 5px;
  }
  .devicelabel>.el-checkbox__label{
      font-size: 18px;
      color: #fff;
  }
  .pb-colorbg {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .bg-green {
        background: green
    }
    .bg-gray {
        background: #666;
    }
  /* .devicelabel>span{
      width: 100%;
      background: #0c3465;
      color: #fff;
      border-radius: 4px;
      border: none;
      font-size: 18px;
      text-align: left;
      margin: 10px 5px;
  } */
  /* .devicelabel>span:hover{
      color: #fff;
      background: #2b5486;
  } */
</style>